<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">操作日志</div>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postOperPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'"> </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script setup>
import { postOperPage } from "@/api/common";
import { useStoreCommonEnum } from "@/store";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  // {
  //   name: "管理员筛选",
  //   type: "select",
  //   value: undefined,
  //   placeholder: "请选择",
  //   filed: "deptId",
  //   async: async (record) => {
  //     record.list = await storeCommonEnum.getCommonEnum("department");
  //   },
  // },
  {
    name: "管理员筛选",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "nickname",
    labelCol: { style: { width: "100px" } } 
  },
  {
    name: "IP查找",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "operIp",
  },
  {
    name: "操作内容",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "content",
  },
  {
    name: "选择时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "角色",
    dataIndex: "roleName",
    key: "roleName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "管理员姓名",
    dataIndex: "nickname",
    key: "nickname",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "所在地址",
    dataIndex: "operIp",
    key: "operIp",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作内容",
    dataIndex: "content",
    key: "content",
    width: "150px",
    ellipsis: true,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const edit = (record) => {
  router.push({
    path: "/sys/account/edit",
    query: {
      id: record?.id,
    },
  });
};

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);
</script>

<style lang="less" scoped></style>
